<div class="main_content white_design">
    <config-tab></config-tab>
    <div class="tab-content">
        <h2 i18n="@@ae-list.application_entries_list">Application Entities list</h2>
        <div class="filter_line" *ngIf="advancedConfig">
            <div class="filter_block">
                <filter-generator [filterIdTemplate]="'ae-list'" [filterID]="'ae-list'" [schema]="filterSchema" [model]="filter" (submit)="searchAes($event)" [filterTreeHeight]="filterHeight"></filter-generator>
            </div>
        </div>
        <div class="filter_line more_function_block">
            <div class="filter single_block">
                <div class="filter_block">
                    <div class="line">
                        <a href="" (click)="$event.preventDefault();advancedConfig=true" *ngIf="!advancedConfig" class="more"><ng-container i18n="@@extended_search">Extended search</ng-container><i class="glyphicon glyphicon-triangle-bottom"></i></a>
                        <a href="" (click)="$event.preventDefault();advancedConfig=false" *ngIf="advancedConfig" class="more ng-hide"><ng-container i18n="@@extended_search">Extended search</ng-container><i class="glyphicon glyphicon-triangle-top"></i></a>

                        <a href="" (click)="$event.preventDefault();createAe()" class="more ng-hide" i18n-title="@@title.ae-list.register_new_application_entity" title="Register new application entity"> <span class="glyphicon glyphicon-plus"></span><ng-container i18n="@@ae-list.new_aet">New AET</ng-container></a>

                    </div>
                </div>
                <div class="filter_block">
                    <div class="line">
                        <input autocomplete="off" id="aesfilter" class="aesfilter" [(ngModel)]="aesfilter" i18n-placeholder="@@search_device"  placeholder="Search device"/>
                    </div>
                </div>
            </div>
        </div>
        <table class="j4care-table">
            <thead>
            <tr>
                <th></th>
                <th i18n="@@aetitle">AETitle</th>
                <th i18n="@@device_name">Device Name</th>
                <th i18n="@@ae-list.other_ae_title">Other AETitle</th>
                <th i18n="@@description">Description</th>
                <th i18n="@@ae-list.association_initiator">Association Initiator</th>
                <th i18n="@@ae-list.association_acceptor">Association Acceptor</th>
                <th i18n="@@application_cluster">Application Cluster</th>
                <th i18n="@@installed">Installed</th>
                <th i18n-title="@@title.dicom_network_connection" title="Dicom network connection" i18n="@@net_connection">Net. Connection</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let ae of  aes | search:aesfilter | slice:moreAes.start:moreAes.limit; let i = index">
                <td class="buttons_td">
                    <span class="numbers">{{i+1}}.</span>
                    <a class="table_btn" title="Echo" href="" (click)="$event.preventDefault();echoAe(ae.dicomAETitle)">
                        <span class="echo_icon"></span>
                    </a>
                    <a [permission]="{id:'action-devicelist-device_configuration',param:'visible'}" class="table_btn" i18n-title="@@title.ae-list.delete_from_device_the_ae" title="Delete from device the AE" href="" (click)="$event.preventDefault();deleteAE(ae.dicomDeviceName, ae.dicomAETitle)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                </td>
                <td>{{ae['dicomAETitle']}}</td>
                <td>
                    <a i18n-title="@@edit_device" title="Edit device" href="" routerLink="/device/edit/{{ae['dicomDeviceName']}}">
                        {{ae['dicomDeviceName']}}
                    </a>
                </td>
                <td>
                    <span *ngFor="let otherae of ae['dcmOtherAETitle']">{{otherae}}<br></span>
                </td>
                <td>{{ae['dicomDescription']}}</td>
                <td>{{ae['dicomAssociationInitiator']}}</td>
                <td>{{ae['dicomAssociationAcceptor']}}</td>
                <td>
                    <span *ngFor="let cluster of ae['dicomApplicationCluster']">{{cluster}}<br></span>
                </td>
                <td *ngIf="ae['dicomInstalled']=== false" i18n="@@false">false</td>
                <td *ngIf="ae['dicomInstalled']!= false" [innerHtml]="ae['dicomInstalled'] || inherit"></td>
                <td>
                    <connection-formater [dicomNetworkConnection]="ae['dicomNetworkConnection']"></connection-formater>
                </td>
            </tr>
            </tbody>
        </table>
        <button class="load_more" *ngIf="aes && moreAes.limit <= aes.length" (click)="loadMoreAes()"><i *ngIf="moreAes.loaderActive" class="fa fa-spinner fa-spin fa-3x fa-fw"></i><ng-container i18n="@@more">More</ng-container></button>
    </div>
</div>